<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <!-- 第一行 -->
      <div class="first-line">
        <span class="before">
          <svg-icon data_iconName="logo" style="height: 1.2em;width: 1.2em" />
           启迪城服（杭州）环境科技有限公司
        </span>
        <span class="center">
          <svg-icon data_iconName="顶图" className="fullscreen_icon" />
        </span>
        <span class="after">{{ currentDate }}</span>
      </div>
      <!-- 第二行 -->
      <div class="second-line">
        <!-- 左 -->
        <div class="left">
          <div class="top">
            <div class="item" style="grid-column-start: span 2">
              <span class="before" style="color: #30a0ff;"
                >{{ gridData.paper }}吨</span
              >
              <img src="@/assets/img/纸类@2x.png" alt="" />
              <span class="after">纸类</span>
            </div>
            <!-- <div class="item">
              <span class="before" style="color:#7461FF;"
                >{{ gridData.froth }}吨</span
              >
              <img src="@/assets/img/大件垃圾@2x.png" alt="" />
              <span class="after">泡沫</span>
            </div> -->
            <div class="item">
              <span class="before" style="color: #24C17B;"
                >{{ gridData.iron }}吨</span
              >
              <img src="@/assets/img/玻璃@2x.png" alt="" />
              <span class="after">金属类</span>
            </div>
            <div class="item">
              <span class="before" style="color:#D9BE2C;"
                >{{ gridData.spinning }}吨</span
              >
              <img src="@/assets/img/纺织@2x.png" alt="" />
              <span class="after">纺织类</span>
            </div>
          </div>
          <div class="bottom" id="data-alarmManage-table-wrap"></div>
        </div>
        <!-- 中 -->
        <div class="center">
          <img class="logo" src="@/assets/img/图层3@2x.png" alt="" />
          <img class="bg" src="@/assets/img/背景图@2x.png" alt="" />
          <div>
            <span>{{ gridData.garbageDecrement }}吨</span>
            <span>垃圾减量</span>
          </div>
        </div>
        <!-- 右 -->
        <div class="right">
          <div class="top">
            <div class="item">
              <span class="before" style="color:#FDB100;"
                >{{ gridData.plastic }}吨</span
              >
              <img src="@/assets/img/铜铝@2x.png" alt="" />
              <span class="after">塑料类</span>
            </div>
            <div class="item">
              <span class="before" style="color:#F97038;"
                >{{ gridData.glass }}吨</span
              >
              <img src="@/assets/img/塑料@2x.png" alt="" />
              <span class="after">玻璃类</span>
            </div>
            <div class="item">
              <span class="before" style="color:#F44373;"
                >{{ gridData.froth }}吨</span
              >
              <img src="@/assets/img/铁@2x.png" alt="" />
              <span class="after">废弃电子产品</span>
            </div>
            <div class="item">
              <span class="before" style="color:#22C0AF;"
                >{{ gridData.largeBaggage }}吨</span
              >
              <img src="@/assets/img/纺织@2x.png" alt="" />
              <span class="after">废纸塑铝复合包装</span>
            </div>
          </div>
          <div class="bottom">
            <div
              ref="broken"
              style="width: 100%; height: 100%; padding: .125rem; box-sizing: border-box;"
            ></div>
          </div>
        </div>
      </div>

      <!-- 第三行 -->
      <div class="third-line">
        <!-- 左 -->
        <div class="left">
          <div
            style="width: 100%; height: 100%; padding: 0rem; box-sizing: border-box;"
          >
            <dv-scroll-board
              :config="config"
              style="width:100%;height:100%"
              ref="scrollBoard"
            />
          </div>
        </div>
        <!-- 中 -->
        <!-- <div class="right">
          <span @click="getCamera">打开摄像链接</span>
        </div> -->
        <!-- 右 -->
      </div>
    </dv-full-screen-container>
  </div>
</template>
<script>
import echarts from "echarts";
import { WebVideoCtrl } from "../common/webVideoCtrl.js";
export default {
  data() {
    return {
      // 实时收运数据
      realTimeData: [],
      currentDate: "",
      gridData: {
        id: "",
        paper: "",
        froth: "",
        copper: "",
        plastic: "",
        glass: "",
        spinning: "",
        iron: "",
        largeBaggage: "",
        garbageDecrement: "",
        garbagePercentage: "",
        weeklyCapacity: "",
      },
      config: {
        // 表行数
        rowNum: 7,
        // 表头背景色
        headerBGC: "#003C76",
        // 奇数行背景色
        oddRowBGC: "#07275F",
        // 偶数行背景色
        evenRowBGC: "#07275F",
        // 轮播方式
        carousel: "single",
        // 轮播时间间隔(ms)
        waitTime: 2000,
        // 悬浮暂停轮播
        hoverPause: false,
        // 表头数据
        header: [
          "磅单号",
          "客户名称",
          "品类名称",
          "毛重",
          "皮重",
          "净重",
          "总价",
          "时间",
        ],
        // 列对齐方式
        align: [
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
          "center",
        ],
        // 表数据
        data: [],
        // data: this.joinTrend,
      },
    };
  },
  created() {
    this.getData(this.getUrlParam("id"));
    //实时收运数据
    this.getRealTime();
    setInterval(() => {
      // this.getData(this.getUrlParam("id"));
      //实时收运数据
      this.getRealTime();
    }, 1000 * 10);

    this.getCurrentDate();
    setInterval(this.getCurrentDate, 1000);

    // 获取摄像头
    // this.getCamera();
  },
  mounted() {
    // this.$nextTick(() => {
    //   // this.alarmManage();
    // });
    setTimeout(() => {
      // 环形图
      this.alarmManage();
      // 曲线图
      this.drewBroken(this.$refs["broken"]);
    }, 0);
  },
  methods: {
    getCamera() {
      // this.$axios
      //   .get("/ISAPI/Security/sessionLogin/capabilities?username=admin", {})
      //   .then((res) => {
      //     console.log(res);
      //     var domParser = new DOMParser();
      //     var xmlDoc = domParser.parseFromString(res.data, "text/xml");
      //     console.log(xmlDoc.querySelector("sessionID").innerHTML);
      //     this.getLogin(xmlDoc.querySelector("sessionID").innerHTML);
      //   });

      window.open("http://192.168.9.241", "_blank");
    },
    getLogin(sessionID) {
      // this.$axios
      //   .post(
      //     "/ISAPI/Security/sessionLogin",
      //     `<SessionLogin><userName>admin</userName><password>6c060c6d54935d40c451e6f293efc06228d7986598b0b0bd5e3c619fd364f351undefined</password><sessionID>${sessionID}</sessionID></SessionLogin>`,
      //     {
      //       headers: {
      //         "Content-Type": "application/xml",
      //       },
      //     }
      //   )
      //   .then((res) => {
      //     console.log(res);
      //   });

      // 登录设备
      WebVideoCtrl.I_Login(
        "/ISAPI/Security/sessionLogin",
        "",
        80,
        "admin",
        "b12341234",
        {
          async: false,
          success: function(xmlDoc) {
            console.log("xmlDoc2", xmlDoc); //不能删除
            //TODO 获取通道信息
            // that.getChannelInfo();
            // that.getDevicePort(that.hkvInfo.ip + "_" + that.hkvInfo.port);
            // that.loginLoading = false;

            // that.$message({
            //   showClose: true,
            //   message: "登录成功",
            //   type: "success",
            // });
          },
          error: function() {
            // that.loginLoading = false;
            // that.$message({
            //   showClose: true,
            //   message: "登录失败",
            //   type: "error",
            // });
          },
        }
      );
    },
    getRealTime() {
      this.$axios
        .get("/screen/centersorter/top")
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.realTimeData = [];
          for (var item of res.data) {
            this.realTimeData.push([
              item.bno,
              item.customer,
              item.productText,
              item.weightGross,
              item.weightTare,
              item.weightNet,
              item.total,
              item.tradeday + " " + item.intime,
            ]);
          }
        })
        .catch((err) => {});
    },
    getCurrentDate() {
      var date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
      this.date = date.getDate();
      this.day = new Array(
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      )[date.getDay()];
      this.hour =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      this.minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      // this.second =
      //   date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.currentDate =
        this.year +
        "年" +
        this.month +
        "月" +
        this.date +
        "日 " +
        this.hour +
        ":" +
        this.minute +
        " " +
        this.day;
    },
    getData(id) {
      this.$axios
        .get(`/screen/centersorter/${id}`)
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.gridData = res.data;

          if (typeof this.gridData.garbagePercentage == "string") {
            this.gridData.garbagePercentage = JSON.parse(
              this.gridData.garbagePercentage
            );
          }

          if (typeof this.gridData.weeklyCapacity == "string") {
            this.gridData.weeklyCapacity = JSON.parse(
              this.gridData.weeklyCapacity
            );
          }
        })
        .catch((err) => {});
    },
    getUrlParam: function(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      // "?id=1347346492549038082"
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    // 曲线图
    drewBroken(ele) {
      this.brokenChart = this.$echarts.init(ele);

      var nowdays = new Date();
      var year = nowdays.getFullYear();
      var month = nowdays.getMonth();
      if (month == 0) {
        month = 12;
        year = year - 1;
      }
      if (month < 10) {
        month = "0" + month;
      }

      var myDate = new Date(year, month, 0);
      var monthArr = [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
      ];

      var currentMonth = nowdays.getMonth();
      var currentDate = nowdays.getDate();
      var dates = [
        monthArr[
          currentDate - 6 === 0
            ? currentMonth - 1
            : currentDate - 6 < 0
            ? currentMonth - 1
            : currentMonth
        ] +
          "-" +
          (currentDate - 6 === 0
            ? myDate.getDate()
            : currentDate - 6 < 0
            ? myDate.getDate() + (currentDate - 6)
            : currentDate - 6
          )
            .toString()
            .padStart(2, 0),

        monthArr[
          currentDate - 5 === 0
            ? currentMonth - 1
            : currentDate - 5 < 0
            ? currentMonth - 1
            : currentMonth
        ] +
          "-" +
          (currentDate - 5 === 0
            ? myDate.getDate()
            : currentDate - 5 < 0
            ? myDate.getDate() + (currentDate - 5)
            : currentDate - 5
          )
            .toString()
            .padStart(2, 0),

        monthArr[
          currentDate - 4 === 0
            ? currentMonth - 1
            : currentDate - 4 < 0
            ? currentMonth - 1
            : currentMonth
        ] +
          "-" +
          (currentDate - 4 === 0
            ? myDate.getDate()
            : currentDate - 4 < 0
            ? myDate.getDate() + (currentDate - 4)
            : currentDate - 4
          )
            .toString()
            .padStart(2, 0),

        monthArr[
          currentDate - 3 === 0
            ? currentMonth - 1
            : currentDate - 3 < 0
            ? currentMonth - 1
            : currentMonth
        ] +
          "-" +
          (currentDate - 3 === 0
            ? myDate.getDate()
            : currentDate - 3 < 0
            ? myDate.getDate() + (currentDate - 3)
            : currentDate - 3
          )
            .toString()
            .padStart(2, 0),

        monthArr[
          currentDate - 2 === 0
            ? currentMonth - 1
            : currentDate - 2 < 0
            ? currentMonth - 1
            : currentMonth
        ] +
          "-" +
          (currentDate - 2 === 0
            ? myDate.getDate()
            : currentDate - 2 < 0
            ? myDate.getDate() + (currentDate - 2)
            : currentDate - 2
          )
            .toString()
            .padStart(2, 0),

        monthArr[currentDate - 1 === 0 ? currentMonth - 1 : currentMonth] +
          "-" +
          (currentDate - 1 === 0
            ? myDate.getDate()
            : currentDate - 1 < 0
            ? myDate.getDate + (currentDate - 1)
            : currentDate - 1
          )
            .toString()
            .padStart(2, 0),

        monthArr[currentMonth] + "-" + currentDate.toString().padStart(2, 0),
      ];

      let option = {
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: ["rgba(255,255,255, 0.3)"],
              width: 0.5,
              type: "dashed",
            },
          },
          type: "category",
          boundaryGap: false,
          data: dates,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#c3dbff", //
              fontSize: 14,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#315070",
            },
          },
          axisTick: {
            show: true,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        yAxis: [
          {
            splitLine: {
              show: true,
              lineStyle: {
                color: ["rgba(255,255,255, 0.3)"],
                width: 0.5,
                type: "dashed",
              },
            },
            type: "value",
            axisLabel: {
              show: true,
              formatter: "{value}(吨)",
              margin: 2,
              textStyle: {
                color: "#c3dbff",
                fontSize: 14,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#315070",
              },
            },
            scale: true,
            max: 100,
            min: 0,
            splitNumber: 5,
            boundaryGap: [0, "100%"],
          },
        ],

        series: [
          {
            type: "line",
            symbol: "circle",
            symbolSize: 7,
            smooth: true,
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#05F2F5", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(255,255,255,0.1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            lineStyle: {
              color: "#05F2F5",
            },

            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#4BF972",
              },
              {
                offset: 1,
                color: "#24245A",
              },
            ]),
            // data: this.trendData
            data: [
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[0]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[1]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[2]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[3]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[4]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[5]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
              {
                value: this.gridData.weeklyCapacity
                  ? this.gridData.weeklyCapacity[6]
                  : 0,
                itemStyle: {
                  normal: {
                    color: "#05F2F5",
                  },
                },
              },
            ],
          },
        ],
      };

      this.brokenChart.setOption(option);
      window.addEventListener("resize", () => {
        this.brokenChart.resize();
      });
    },
    // 环形图
    alarmManage() {
      let drawLine = echarts.init(
        document.getElementById("data-alarmManage-table-wrap")
      );
      let option = null;
      option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "65%",
          top: "10%",
          itemHeight: 10,
          itemWidth: 10,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
            fontWeight: "bold",
          },
          itemGap: 15,
          data: ["纸类", "金属类", "纺织类", "塑料类", "玻璃类", "废弃电子产品", "废纸塑铝复合包装"],
        },
        color: [
          "#03ACFF",
          "#38F0E3",
          "#34EE8F",
          "#E7E72E",
          "#FEAD0D",
          "#F97634",
          "#F1456D",
          "#6D5BEE",
        ],

        icon: "circle",
        series: [
          {
            // center: ["25%", "50%"],
            center: ["30%", "55%"],
            name: "分类占比",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            clockWise: true,
            hoverAnimation: false, //移入放大
            label: {
              normal: {
                padding: [0, -10], //取消hr线跟延长线之间的间隙
                position: "outer",
                // position: "inner",
                formatter: "{a_set|{d}%}\n", // 显示百分比，
                // formatter: "{a_set|{b},{d}%}\n{c_set|{c}辆}\n\n\n",
                padding: [90, -50],
                // borderWidth: 20,
                // borderRadius: 4,
                rich: {
                  per: {
                    //用百分比数据来调整下数字位置，显的好看些。如果不设置，formatter最后一行的空数据就不需要
                    padding: [4, 100],
                  },
                  a_set: {
                    color: "#fff",
                    lineHeight: 20,
                    align: "center",
                  },
                  // c_set: {
                  //   color: "#fff",
                  // },
                },
              },
            },

            // emphasis: {
            //     show: true,
            //     textStyle: {
            //         fontSize: '30',
            //         fontWeight: 'bold',
            //     }
            // },
            labelLine: {
              normal: {
                show: true,
                lineStyle: {},
                length: 10,
                length2: 50,
              },
            },
            data: [
              {
                value: this.gridData.garbagePercentage
                  ? this.gridData.garbagePercentage.paper
                  : 0,
                name: "纸类",
              },
              // {
              //   value: this.gridData.garbagePercentage
              //     ? this.gridData.garbagePercentage.froth
              //     : 0,
              //   name: "泡沫",
              // },
              {
                value: this.gridData.garbagePercentage
                  ? this.gridData.garbagePercentage.iron
                  : 0,
                name: "金属类",
              },

              {
                value: this.gridData.garbagePercentage
                  ? this.gridData.garbagePercentage.spinning
                  : 0,
                name: "纺织类",
              },
              {
                value: this.gridData.garbagePercentage
                  ? this.gridData.garbagePercentage.plastic
                  : 0,
                name: "塑料类",
              },
              {
                value: this.gridData.garbagePercentage
                  ? this.gridData.garbagePercentage.glass
                  : 0,
                name: "玻璃类",
              },
              {
                value: this.gridData.garbagePercentage
                  ? this.gridData.garbagePercentage.froth
                  : 0,
                name: "废弃电子产品",
              },
              {
                value: this.gridData.garbagePercentage,
                name: "废纸塑铝复合包装",
              },
            ],
          },
        ],
      };

      if (option && typeof option === "object") {
        drawLine.setOption(option);
      }
    },
  },
  watch: {
    "gridData.garbagePercentage"(newVal, oldVal) {
      console.log(newVal, oldVal);
      if (newVal) {
        this.alarmManage();
        this.drewBroken(this.$refs["broken"]);
      }
    },
    realTimeData(newVal, oldVal) {
      if (newVal.length != 0) {
        this.config = {
          // 表行数
          rowNum: 7,
          // 表头背景色
          headerBGC: "#003C76",
          // 奇数行背景色
          oddRowBGC: "#07275F",
          // 偶数行背景色
          evenRowBGC: "#07275F",
          // 轮播方式
          carousel: "single",
          // 轮播时间间隔(ms)
          waitTime: 9999999999999999,
          // 悬浮暂停轮播
          hoverPause: false,
          // columnWidth: [150, 150, 150, 150, 150, 150, 150, 200],
          // 表头数据
          header: [
            "磅单号",
            "客户名称",
            "品类名称",
            "毛重",
            "皮重",
            "净重",
            "总价",
            "时间",
          ],
          // 列对齐方式
          align: [
            "center",
            "center",
            "center",
            "center",
            "center",
            "center",
            "center",
            "center",
          ],
          // 表数据
          data: this.realTimeData,
          // data: this.joinTrend,
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#index {
  width: 100vw;
  height: 100vh;
  background-color: #07003f;

  #dv-full-screen-container {
    padding-top: 0.25rem /* 20/80 */;
    padding-right: 0.375rem /* 30/80 */;
    // padding-left: 0.4375rem /* 35/80 */;
    padding-left: 0.375rem /* 30/80 */;
    box-sizing: border-box;
    .first-line {
      color: #fff;
      font-weight: bold;
      text-align: center;
      height: 0.575rem /* 46/80 */;
      position: relative;
      .before {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        line-height: 0.575rem /* 46/80 */;
        font-size: 16px;
        font-weight: Bold;
      }
      .center {
        display: block;
        width: 11.0625rem /* 885/80 */;
        height: 100%;
        line-height: 0.575rem;
        margin: 0 auto;
        // background-image: url("../assets/img/组1@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        position: relative;
        .fullscreen_icon {
          width: 100%;
          height: 100%;
        }
        &::after {
          content: "分拣中心数据统计";
          display: inline-block;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 24px;
        }
      }
      .after {
        // float: right;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        line-height: 0.575rem /* 46/80 */;
        font-size: 16px;
        font-weight: Bold;
      }
    }
    .second-line {
      margin-top: 0.425rem /* 34/80 */;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 7.7125rem /* 617/80 */;
        display: grid;
        grid-template-rows: 2.975rem /* 238/80 */ 4.375rem /* 350/80 */;
        grid-template-columns: 7.7125rem /* 617/80 */;
        .top {
          width: 100%;
          display: grid;
          grid-template-rows: 1.3625rem /* 109/80 */ 1.3625rem /* 109/80 */;
          grid-template-columns: 3.73125rem /* 300/80 */ 3.73125rem /* 300/80 */;
          row-gap: 0.25rem /* 20/80 */;
          column-gap: 0.25rem /* 20/80 */;
          .item {
            width: 100%;
            height: 100%;
            background-color: #07275f;
            position: relative;
            color: #fff;
            img {
              width: 100%;
              height: 100%;
            }
            .before {
              position: absolute;
              left: 50%;
              top: 45%;
              transform: translate(-50%, -50%);
              font-weight: bold;
              font-size: 30px;
              width: 100%;
              text-align: center;
            }
            .after {
              position: absolute;
              left: 50%;
              top: 60%;
              transform: translate(-50%, 0);
              font-size: 16px;
              font-weight: bold;
            }
          }
        }
        .bottom {
          width: 100%;
          height: 4.375rem /* 350/80 */;
          background-color: #07275f;
          margin-top: 0.25rem /* 20/80 */;
          padding: 10px;
          box-sizing: border-box;
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            width: 0.075rem /* 6/80 */;
            height: 0.3125rem /* 25/80 */;
            background-color: #0196ff;
            position: absolute;
            left: 0;
            top: 0.25rem /* 20/80 */;
          }
          &::after {
            content: "各分类占比统计图";
            display: inline-block;
            width: auto;
            height: 0.3125rem /* 25/80 */;
            line-height: 0.3125rem;
            // background-color: #0196ff;
            position: absolute;
            left: 0.2125rem /* 17/80 */;
            top: 0.25rem /* 20/80 */;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .center {
        width: 7.7375rem /* 619/80 */;
        height: 7.35rem /* 588/80 */;
        position: relative;
        img {
          &.logo {
            width: 0.5rem /* 40/80 */;
            height: 0.5rem /* 40/80 */;
            position: absolute;
            left: 50%;
            top: 20%;
            transform: translate(-50%, 0);
          }
          &.bg {
            width: 100%;
            height: 100%;
          }
        }
        & > div {
          color: #fff;
          position: absolute;
          left: 50%;
          top: 30%;
          transform: translate(-50%, 0);
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-top: 0.125rem /* 10/80 */;
          span {
            &:first-of-type {
              font-size: 0.6rem /* 48/80 */;
              font-weight: bold;
              margin-bottom: 0.25rem /* 20/80 */;
            }
            &:nth-of-type(2) {
              font-size: 0.3rem /* 24/80 */;
              font-weight: bold;
            }
          }
        }
      }
      .right {
        display: grid;
        grid-template-rows: 2.975rem /* 238/80 */ 4.375rem /* 350/80 */;
        grid-template-columns: 7.7125rem /* 617/80 */;
        // justify-content: flex-end;
        width: 7.7125rem /* 617/80 */;
        .top {
          // width: 617px;
          width: 100%;
          display: grid;
          grid-template-rows: 1.3625rem /* 109/80 */ 1.3625rem /* 109/80 */;
          grid-template-columns: 3.73125rem /* 300/80 */ 3.73125rem /* 300/80 */;
          row-gap: 0.25rem /* 20/80 */;
          column-gap: 0.25rem /* 20/80 */;
          // justify-content: flex-end;
          .item {
            width: 100%;
            height: 100%;
            background-color: #07275f;
            position: relative;
            color: #fff;
            img {
              width: 100%;
              height: 100%;
            }
            .before {
              position: absolute;
              left: 50%;
              top: 45%;
              transform: translate(-50%, -50%);
              font-weight: bold;
              font-size: 30px;
              width: 100%;
              text-align: center;
            }
            .after {
              position: absolute;
              left: 50%;
              top: 60%;
              transform: translate(-50%, 0);
              font-size: 16px;
              font-weight: bold;
            }
          }
        }
        // 曲线图
        .bottom {
          // width: 7.7125rem /* 617/80 */;
          width: 100%;
          height: 4.375rem /* 350/80 */;
          background-color: #07275f;
          margin-top: 0.25rem /* 20/80 */;
          position: relative;
          &::before {
            content: "";
            display: inline-block;
            width: 0.075rem /* 6/80 */;
            height: 0.3125rem /* 25/80 */;
            background-color: #0196ff;
            position: absolute;
            left: 0;
            top: 0.25rem /* 20/80 */;
          }
          &::after {
            content: "周收运量曲线图（周）";
            display: inline-block;
            width: auto;
            height: 0.3125rem /* 25/80 */;
            line-height: 0.3125rem;
            position: absolute;
            left: 0.2125rem /* 17/80 */;
            top: 0.25rem /* 20/80 */;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
    .third-line {
      // display: flex;
      // justify-content: space-between;
      margin-top: 0.5rem /* 40/80 */;
      .left {
        // width: 15.3375rem /* 1227/80 */;
        height: 4.1125rem /* 329/80 */;
        background-color: #07275f;
        position: relative;
        padding-top: 50px;
        box-sizing: border-box;
        &::before {
          content: "";
          display: inline-block;
          width: 0.075rem /* 6/80 */;
          height: 0.3125rem /* 25/80 */;
          background-color: #0196ff;
          position: absolute;
          left: 0;
          top: 0.25rem /* 20/80 */;
        }
        &::after {
          content: "实时收运数据";
          display: inline-block;
          width: auto;
          height: 0.3125rem /* 25/80 */;
          line-height: 0.3125rem;
          // background-color: #0196ff;
          position: absolute;
          left: 0.2125rem /* 17/80 */;
          top: 0.25rem /* 20/80 */;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
        }
      }
      .right {
        width: 7.7125rem /* 617/80 */;
        height: 4.1125rem /* 329/80 */;
        background-color: #07275f;
        position: relative;
        &::before {
          content: "";
          display: inline-block;
          width: 0.075rem /* 6/80 */;
          height: 0.3125rem /* 25/80 */;
          background-color: #0196ff;
          position: absolute;
          left: 0;
          top: 0.25rem /* 20/80 */;
        }
        &::after {
          content: "摄像区域";
          display: inline-block;
          width: auto;
          height: 0.3125rem /* 25/80 */;
          line-height: 0.3125rem;
          // background-color: #0196ff;
          position: absolute;
          left: 0.2125rem /* 17/80 */;
          top: 0.25rem /* 20/80 */;
          color: #fff;
          font-size: 16px;
          font-weight: bold;
        }
        // text-align: center;
        // line-height: 4.1125rem /* 329/80 */;
        span {
          color: #fff;
          background: rgb(0, 60, 118);
          position: absolute;
          left: 50%;
          top: 50%;
          text-align: center;
          transform: translate(-50%, -50%);
          width: 1.875rem /* 150/80 */;
          height: 0.375rem /* 30/80 */;
          line-height: 0.375rem /* 30/80 */;
          border-radius: 0.1875rem /* 15/80 */;
          cursor: pointer;
          // font-weight: bold;
        }
      }
    }
  }
}
</style>
